import { Form, Select, Radio, Button, DatePicker } from "antd";

interface Props {
  onSearch: (values: any) => void;
  brandOptions: readonly { label: string; value: string }[];
  partitionOptions: readonly { label: string; value: string }[];
  shopOptions: readonly { label: string; value: string }[];
  sourceOptions: readonly { label: string; value: string }[];
}

const FormComponent = ({
  onSearch,
  brandOptions,
  partitionOptions,
  shopOptions,
  sourceOptions,
}: Props) => {
  return (
    <Form
      name="advanced_search"
      initialValues={{ remember: true }}
      className={"w-90%"}
      onFinish={onSearch}
      layout="inline"
    >
      <Form.Item name="brand">
        <Select
          showSearch
          defaultValue={"所有品牌"}
          style={{ width: 180 }}
          options={brandOptions}
        ></Select>
      </Form.Item>

      <Form.Item name="partition">
        <Select
          showSearch
          defaultValue={"所有分区"}
          style={{ width: 180 }}
          options={partitionOptions}
        />
      </Form.Item>

      <Form.Item name="shop">
        <Select
          showSearch
          defaultValue={"所有店铺"}
          style={{ width: 180 }}
          options={shopOptions}
        />
      </Form.Item>

      <Form.Item name="source">
        <Select
          showSearch
          defaultValue={"所有来源"}
          style={{ width: 180 }}
          options={sourceOptions}
        />
      </Form.Item>

      <Form.Item
        name="timeRange"
        rules={[{ required: true, message: "请选择时间范围!" }]}
      >
        <Radio.Group buttonStyle={"solid"}>
          <Radio.Button value="7">近7日</Radio.Button>
          <Radio.Button value="15">近15日</Radio.Button>
          <Radio.Button value="30">近30日</Radio.Button>
        </Radio.Group>
      </Form.Item>

      <Form.Item name="customTime">
        <DatePicker format="YYYY-MM-DD" placeholder="选择时间" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          筛选
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FormComponent;
